<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { Icon } from "@iconify/vue";
import { onMounted, onUnmounted, reactive } from "vue";
import { formatCurrentTimeToString } from "@/utils/dateUtil.ts";
import DropdownSelect from "@/views/Home/components/DropdownSelect.vue";

const searchKey = ref('')
const active = ref(false)

let dateID: any;
const date = reactive(formatCurrentTimeToString())
const engineDialog = ref(false);

const wordsDialog = ref(false);
const wordsKeyList = reactive<any[]>([])

const engineBoxRef = ref<HTMLElement | null>(null);

const wordsBoxRef = ref<HTMLElement | null>(null);

const input = ref<HTMLElement | null>(null)

onMounted(() => {
  dateID = setInterval(() => {
    Object.assign(date, formatCurrentTimeToString())
  }, 1000)
})
onUnmounted(() => {
  clearInterval(dateID)
})

watchEffect(() => {
  if (!searchKey) {
    return;
  }
  const mockFetchArr = [];
  for (let i = 1; i < 11; i++) {
    mockFetchArr.push({
      words: searchKey.value+i
    });
  }
  Object.assign(wordsKeyList, mockFetchArr);
})
const currentEngine = reactive( {
  key: 'www.baidu.com',
  svg: 'https://minio.gezizm.com/view/action/icon/baidu.svg',
  name: '百度',
})

const mockSearchOptions = [{
  key: 'www.baidu.com',
  svg: 'https://minio.gezizm.com/view/action/icon/baidu.svg',
  name: '百度',
  },
  {
    key: 'www.bing.com',
    svg: 'https://minio.gezizm.com/view/action/icon/bing.svg',
    name: '必应',
  },
  {
    key: 'www.google.com',
    svg: 'https://minio.gezizm.com/view/action/icon/google.svg',
    name: '谷歌',
  },
  {
    key: 'https://hao.360.com/',
    svg: 'https://minio.gezizm.com/view/action/icon/360.svg',
    name: '360搜索',
  },
]


//监听 engine 弹窗状态，如果点击弹窗以外部分，则关闭
onMounted(() => {
  document.addEventListener('mouseup', (e) =>{
    engineDialog.value =  (e.target == engineBoxRef.value);
    wordsDialog.value = (e.target == wordsBoxRef.value || e.target ==  input.value ) && searchKey.value
  })

})

//切换搜索引擎
function handleChangeEngine(engineData: any) {
  Object.assign(currentEngine, engineData)
}

watchEffect(()=>{
  wordsDialog.value = !!searchKey.value
})
</script>

<template>
  <div class="time-box">
    <div class="time">{{ date.time }}</div>
    <div class="day-week">{{ `${date.day} ${date.week}` }}</div>
  </div>
  <div class="search-wrapper" @click="active = !active">
      <div class="search-wrapper-container">
        <div class="flex items-center h-full px-[30px] justify-center">
            <div class="flex items-center cursor-pointer" @click="engineDialog = !engineDialog">
              <img :src="currentEngine.svg" :alt="currentEngine.name" class="w-[20px] h-[20px] mr-1">
              <icon icon="mingcute:down-fill" class="mx-1 transition" :style="engineDialog ? '' : { transform: 'rotate(180deg)' }"></icon>
            </div>
          <input placeholder="请输入内容" class="outline-none" v-model="searchKey" ref="input" />
          <Icon icon="mingcute:search-line" width="25" height="25" />
        </div>
      </div>
    <DropdownSelect v-show="engineDialog">
      <div class="flex items-center p6" ref="engineBoxRef">
        <div v-for="item in mockSearchOptions" :key="item.key" class="flex items-center flex-col cursor-pointer mx-4" @click="handleChangeEngine(item)">
          <div class="icon-contain">
            <img :src="item.svg" :alt="item.name" class="w-[20px] h-[20px]" />
          </div>
          <div class="icon-key">{{ item.name }}</div>
        </div>
      </div>
    </DropdownSelect>

    <DropdownSelect v-show="wordsDialog">
      <div ref="wordsBoxRef" class="words-box" >
        <div class="flex items-center words-box-item" v-for="(item, index) in wordsKeyList" :key="index">
          <icon icon="octicon:search-16" width="12" height="12" />
          <span>{{ item?.words }}</span>
        </div>
      </div>
    </DropdownSelect>
  </div>
</template>

<style scoped lang="less">
.time-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;

  .time {
    font-size: 70px;
    line-height: 70px;
    letter-spacing: 0;
    font-weight: 600;
  }

  .day-week {
    padding-top: 10px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    letter-spacing: 0;
  }
}

.search-wrapper {
  width: 570px;
  height: 45px;
  margin: 0 auto;
  transition: 0.3s all;
  position: relative;
  .search-wrapper-container {
    height: 100%;
    width: 100%;
    margin: 30px auto 0;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 31px;

    input {
      border: none;
      width: 500px;
      height: 100%;
      padding: 0 10px;
      background: transparent;
      font-size: 14px;
      animation: 4s linear 0s infinite alternate inutStart;
    }

  }
  .icon-contain {
    border-radius: 6px;
    background: #ffffff;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon-key {
    margin-top: 3px;
    color: #000000;
    font-size: 12px;
    line-height: 17px;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .words-box {
    color: black;
    padding-top: 10px;
    padding-bottom: 10px;
    &-item {
      cursor: pointer;
      margin: 0 5px 0 5px;
      padding: 7px;
      transition: .3s all;
      border-radius: 10px;
      span {
        font-size: 12px;
        padding-left: 10px;
        font-weight: 500;
        color: #333333;
      }
      &:hover {
        background: rgb(255, 255, 255);

      }
    }
  }
}

@keyframes inputStart {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 500px;
  }
}
</style>
